<%--
  Created by IntelliJ IDEA.
  User: wwy
  Date: 2025/3/5
  Time: 10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"
         isELIgnored="false" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<rapid:override name="title">考试管理</rapid:override>

<rapid:override name="head_extend">
  <link href="/static/admin_v1/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</rapid:override>

<rapid:override name="content">
  <style>
    table { border-collapse: collapse; width: 100%; }
    table th, table td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    .page-container { padding: 20px; }
    .tab-btn {
      padding: 10px 20px;
      cursor: pointer;
      background: #4CAF50;
      color: white;
      border: none;
      margin-right: 5px;
    }
  </style>
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>考试管理</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li><a href="table_basic.html#">选项1</a>
              </li>
              <li><a href="table_basic.html#">选项2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <div class="row">
            <div class="col-sm-3">
              <div class="input-group">
                <input type="text" placeholder="请输入关键词" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
              </div>
            </div>
          </div>
          <div class="ibox-content">
            <div class="row">
              <!-- 标签页按钮 -->
              <button class="tab-btn" onclick="showTab('insurance-type')">考试列表</button>
              <button class="tab-btn" onclick="showTab('employee-insurance')">考生信息</button>
              <button class="tab-btn" onclick="showTab('payment-record')">试题与答题结果</button>
            </div>
          </div>
          <div class="table-responsive" hidden="hidden">
            <table class="table table-striped">
              <div id="insurance-type" class="tab-content">
                <table>
                  <tr>
                    <th>考试标题</th>
                    <th>考试类型</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                  </tr>
                  <!-- 模拟数据，实际需从后端获取 exam 列表 -->
                    <%--   <c:forEach var="exam" items="${examList}">
                         <tr>
                           <td>${exam.title}</td>
                           <td>${exam.exam_type}</td>
                           <td>${exam.start_time}</td>
                           <td>${exam.end_time}</td>
                         </tr>
                       </c:forEach>--%>
                </table>
              </div>

              <div id="employee-insurance" class="tab-content">
                <!-- 考试详情模拟（简化逻辑） -->
                <table>
                  <tr>
                    <th>考生ID</th>
                    <th>考试状态</th>
                  </tr>
                    <%--    <c:forEach var="participant" items="${participantList}">
                          <tr>
                            <td>${participant.candidate_id}</td>
                            <td>${participant.status}</td>
                          </tr>
                        </c:forEach>--%>
                </table>
              </div>
              <div id="payment-record" class="tab-content">
                <table>
                  <tr>
                    <th>题目内容</th>
                    <th>考生答案</th>
                    <th>是否正确</th>
                    <th>人工评分</th>
                  </tr>
                    <%--  <c:forEach var="result" items="${questionResultList}">
                        <tr>
                          <td>${result.content}</td>
                          <td>${result.answer}</td>
                          <td>${result.is_correct ? "正确" : "错误"}</td>
                          <td>${result.manual_score}</td>
                        </tr>
                      </c:forEach>--%>
                </table>
              </div>


            </table>
          </div>


        </div>
      </div>
    </div>

  </div>
  <script>
    function showTab(tabId) {
      const tabContents = document.querySelectorAll('.tab-content');
      tabContents.forEach(content => content.style.display = 'none');
      document.getElementById(tabId).style.display = 'block';
    }
  </script>
</rapid:override>

<rapid:override name="js_extend">
  <!-- Bootstrap table -->
  <script src="/static/admin_v1/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="/static/admin_v1/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
  <script src="/static/admin_v1/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  <script src="/static/admin_v1/js/bootstrap-paginator.js"></script>

  <!-- Peity -->
  <script src="/static/admin_v1/js/demo/bootstrap-table-demo.js"></script>
  <script>
    $(function () {
      $('#pagination').bootstrapPaginator({
        bootstrapMajorVersion: 3,
        currentPage: ${requestScope.pageInfo.pageNum },
        totalPages: ${requestScope.pageInfo.pages },
        pageUrl: function (type, page, current) {
          return '/admin/user/get.do?pageNum=' + page;
        },
        itemTexts: function (type, page, current) {
          switch (type) {
            case "first":
              return "首页";
            case "prev":
              return "上一页";
            case "next":
              return "下一页";
            case "last":
              return "末页";
            case "page":
              return page;
          }
        }
      });
    });
  </script>
</rapid:override>

<%@include file="/jsp/common/admin/base.jsp" %>
